<template>
  <div id="app">
	  <AboutView :addTodo="addTodo"/>
	  <toDo :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
	  <TodoList :todos="todos"
	            :checkTodo="checkTodo"
	            :deleteTodo="deleteTodo"/>
    <router-view />
  </div>
</template>

<style lang="scss">

</style>
<script>
	import AboutView from "./views/AboutView";
	import toDo from "./components/toDo";
	import TodoList from "./components/TodoList";
	export default {
		name: "",
		components:{
			AboutView,
			toDo,
			TodoList,
		},
		data(){
			return{
				todos: JSON.parse(localStorage.getItem('todos')) || [],
			};
		},
		methods:{
			addTodo(todoObj){
				this.todos.unshift(todoObj);
			},
			checkTodo(id) {
				this.todos.forEach((todo) => {
					if (todo.id == id) todo.done = !todo.done;
				});
			},
			deleteTodo(id) {
				this.todos = this.todos.filter((todo) => todo.id !== id);
			},
			checkAllTodo(done) {
				this.todos.forEach((todo) => {
					todo.done = done;
				});
			},
			clearAllTodo() {
				this.todos = this.todos.filter((todo) => {
					return !todo.done;
				});
			},
		},
		watch: {
			todos: {
				deep: true,
				handler(value) {
					localStorage.setItem("todos",
					JSON.stringify(value)
					)
				}
			}
		}
	}
</script>
